<template>
  <el-upload
    :limit="limit"
    ref="uploads"
    name="uploadFile"
    multiple
    :show-file-list="false"
    :file-list="imgList"
    :on-success="_uploadSuccess"
    :on-exceed="_handleExceed"
    :on-error="_uploadError"
    :on-remove="_uploadRemove"
    :action="uploadStreamUrl">
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>
<script>
import {uploadUrl} from '@/services/model/common'
import constUrl from '@/services/env'

export default {
  props: {
    // 张数限制
    limit: {
      type: Number,
      default: 9
    },
    value: {
      type: null,
    },
  },
  computed: {
    imgList: {
      get(val) {
        //  ******！！！  第一次进入时this.imgListModel为null所以取this.value的值  但上传之后，imgListModel一定有值。为了修复上传闪动的bug,第一次进入时取
        return this.imgListModel || this.initList.map(x => ({name: x.name, url: constUrl + x.url}))
      },
      set(list) {
        this.imgListModel = list
        //  将ul-upload 返回带response的对象格式  以及回显的  对象格式全部转化为 后端需要的字符串路径
        list = list.map(x => {
          if (x.response) {
            return {name: x.name, url: x.response.data.path}
          } else {
            return {name: x.name, url: x.url.replace(constUrl, '')}
          }
        })
        // // 头像只更新 url  ， 图片列表更新列表
        let params = list
        this.$emit('input', params)
        this.$emit('update', params)
      }
    },
    initList() {
      let initList
      // 上传头像模式 value 传入的是字符窜，而不是数组。
      if (this.isAvatar) initList = this.value ? [this.value] : []
      // 图片列表
      else initList = this.value || []
      return initList
    },
  },
  data() {
    return {
      // 文件上传流url
      uploadStreamUrl: uploadUrl,
      // el-upload的组件列表 刚进入时由于 v-model绑定传值的 value由于异步原因不一定有值，所以在刚加载页面时不能对imgListModel赋值
      // 第一次回显读取图片取 vallue中的值
      imgListModel: null,

    }
  },
  methods: {
    // 添加文件个数限制
    _handleExceed(files, fileList) {
      // 每次只能提交一个文件
      if (this.imgList?.length >= this.limit) {
        this.$message.warning('最多添加' + this.limit + '份文件')
        return false
      }
    },
    /**
     * 上传文件之前的钩子，参数为上传的文件
     * 若返回 false 或者返回 Promise 且被 reject，则停止上传。
     */
    // _beforeUpload (file) {
    //   // 文件类型
    //   const FILE_TYPE = file.type
    //   // 文件大小
    //   const FILE_SIZE = Number(file.size || 0)
    //   // 允许上传的图片的类型
    //   const ALLOW_LIST = ['image/jpeg', 'image/png']
    //   // 4M限制
    //   const FILE_SIZE_LIMIT = 1024 * 1024 * 4
    //   if (!ALLOW_LIST.includes(FILE_TYPE) || FILE_SIZE > FILE_SIZE_LIMIT) {
    //     // 文件类型不符提示信息
    //     const TYPE_INFO = '只能上传图片'
    //     // 文件大小超出限制提示信息
    //     const TYPE_SIZE = '文件大小限制4M以内'
    //     const INFO_MSG = !ALLOW_LIST.includes(FILE_TYPE) ? TYPE_INFO : TYPE_SIZE
    //     this.$message.error(INFO_MSG)
    //     return false
    //   }
    // },
    // 上传错误
    _uploadError(err) {
      this.$message.error('上传失败:' + err)
    },
    // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
    _uploadRemove(file, fileList) {
      this.imgList = fileList
    },
    clears() { // 清空图片
      this.$refs.uploads.clearFiles()
    },
    /**
     * 文件上传成功时的钩子
     */
    _uploadSuccess(res, file, fileList) {
      if (res.code === 200) {
        this.imgList = fileList
        this.$message.success('文件上传成功')
        if(this.$parent.fatherMethod){
          this.$parent.fatherMethod();

        }
      } else this.$message.error(res.message)
    },
  }
}
</script>

<style>

</style>
